<template>
	<view class="add-account">
		
		<view class="header">
			<view class="item" @click="targetType(index)" :class="index == operation_type_index ? 'active':''" v-for="(item, index) in typeList" :key="index">{{item.name}}</view>
		</view>
		
		<view class="amount">
			<input name="amount" @input="inputAmount" type="digit" v-model="amount" disabled="false" />
		</view>
		

		
		<view class="type-list">
			<view class="item" @click="funds_type_id = item.id" :class="item.id == funds_type_id ? 'active':''" v-for="(item, index) in typeList[operation_type_index]['list']" :key="index">
				<view class="icon">
					<image :src="item.icon_image" mode="widthFix"></image>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		
		
		
		
		<view class="keyboard">
			<view class="header">
				<picker class="picker-item date" mode="date" start="2018-01-01" :end="date" @change="dateChange"><text class="iconfont icon-rili"></text> {{date}}</picker>
			
				<view class="account"  @click="showMask = true">{{account_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text></view>
				<view class="reamrk">
					<text class="iconfont icon-beizhu1"></text> 
					<input name="remark" @input="inputRemark" type="text" v-model="remark" placeholder="备注信息"/>
				</view>
			</view>

			<view class="number-box">
				<view class="number-list">
					<view @click="inputNumber(1)">1</view>
					<view @click="inputNumber(2)">2</view>
					<view @click="inputNumber(3)">3</view>
					<view @click="inputNumber(4)">4</view>
					<view @click="inputNumber(5)">5</view>
					<view @click="inputNumber(6)">6</view>
					<view @click="inputNumber(7)">7</view>
					<view @click="inputNumber(8)">8</view>
					<view @click="inputNumber(9)">9</view>
					<view @click="inputNumber('.')">.</view>
					<view @click="inputNumber(0)">0</view>
					<view @click="delNumber()" class="del"><text class="iconfont icon-delete"></text></view>
				</view>
				<view class="ok" @click="formSubmit" >OK</view>
			</view>
		</view>
	
	
		<view class="mask" v-if="showMask" @click="showMask = true">
			<view class="account-list" @click="showMask = false">
				<view class="title">选择帐户</view>
				<view class="list">
					<view class="list-cell"  @click="accountChange(item)"  v-for="(item,index) in accountList" :key="index">
						
						<image class="list-logo" :src="item.logo_image"></image>
						<view class="list-body">
							{{item.name}}
						</view>
						<view class="select iconfont  icon-xuanzhong" v-if="item.id == account_id"></view>
					</view>
				</view>
				<view class="cancel" @click="showMask = false">取消</view>
			</view>
		</view>

	</view>
</template>

<script>
	import base from '../../common/base.js';
	
	export default {
		data() {
			return {
				typeList: [
					{
						id: 1,
						name: '支出',
						list: [],
					},
					{
						id: 2,
						name: '收入',
						list: [],
					}
				],
				accountList: [],
				account_id: '',
				funds_type_id: '',
				operation_type_index:0,
				amount: 0.00,
				remark: '',
				showMask: false,
				account_text: '',
				 date: '2018-01-01',
				 id:''
			};
		},
		
		onLoad(options) {
			console.log('mounted');
			this.getAccountList();
			this.getFundsTypeList();
			this.setDate();
			
			if(options.id) {
				this.id = options.id;
				this.getDetail();
			}
		},
		
		mounted() {
			
		},

		methods: {
			//获取编辑的数据
			getDetail: function(){
				var that = this;
				base.base.request({
					data: {id: that.id},
					url: 'funds/detail',
					sCallback: function(res) {
						if(res.code == 200) {
							var detail = res.data;
							that.account_id = detail.account_id;
							that.funds_type_id = detail.funds_type_id;
						
							that.amount = String(detail.amount);
							that.remark = detail.remark;
							that.date = detail.date;
							that.account_text = detail.account_text;
							that.typeList.forEach(function(item, index){
								if(item.id == detail.operation_type){
									that.operation_type_index = index;
								}
							});
							that.getFundsTypeList();
						}
						
					}
				});
			},
			//设置时间
			setDate: function () {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				this.date = currentdate;
			},
			dateChange(evt) {
				this.date = evt.detail.value;
			},
			
			getAccountList : function() {
				var that = this;
				var userinfo = uni.getStorageSync('userinfo');
				// console.log(userinfo);
				base.base.request({
					data: {target_user_id: userinfo.id},
					url: 'account/index',
					sCallback: function(res) {
						if(res.code == 200) {
							that.accountList = res.data.account_list;
							that.account_text = res.data.account_list[0]['name'];
							that.account_id = res.data.account_list[0]['id'];
						}
					}
				});
			},
			
			getFundsTypeList : function() {
				var that = this;
				var operationType = that.typeList[that.operation_type_index]['id'];
				base.base.request({
					data: {type: operationType},
					url: 'account/getFundsType',
					sCallback: function(res) {
						if(res.code == 200) {
							that.typeList[that.operation_type_index]['list'] = res.data;
						}
					}
				});
			},
			
			accountChange: function (item) {
				this.account_id = item.id;
				this.account_text = item.name;
				this.showMaks = false;
				
			},
			
			fundsTypeChange: function (e) {
				this.funds_type_id = e.detail.value;
				// console.log('radio发生change事件，携带value值为：' + e.detail.value)
			},
			
			formSubmit: function (e) {
				var formData = {};
				formData.account_id = this.account_id;
				formData.funds_type_id = this.funds_type_id;
				formData.operation_type = this.typeList[this.operation_type_index]['id'];
				formData.amount = this.amount;
				formData.remark = this.remark;
				formData.date = this.date;
				formData.id = this.id;
				
				
				if(!formData.amount) {
					base.base.alert('请输入余额'); return false;
				}
				
				if(!formData.funds_type_id) {
					base.base.alert('请选择浪费类型'); return false;
				}
				if(!formData.account_id) {
					base.base.alert('请选择帐号'); return false;
				}
				
				var that = this;
				var nui = nui;
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				base.base.request({
					data: formData,
					url: 'funds/add',
					sCallback: function(res){
						if(res.code == 200){
							var pages = getCurrentPages();
							console.log(pages);
							var page = pages[pages.length - 2];
							page.onPullDownRefresh();
							uni.navigateBack({
								delta: 1
							});
						}
					}
				});
				
			},
			
			//切换类型
			targetType: function(index) {
				var typeData = this.typeList[index];
					this.operation_type_index = index;
				this.funds_type_id = '';
				if(typeData.list.length <= 0){
					this.getFundsTypeList();
				}
				
			},
			
			//输入金额
			inputAmount: function(e) {
				this.amount = e.detail.value;
			},
			
			//输入金额
			inputRemark: function(e) {
				
				this.remark = e.detail.value;
			},
			//输入数字
			inputNumber: function(n){
				var amount = this.amount;
				if(parseFloat(amount) == 0){
					this.amount = String(n);
				} else {
					this.amount += String(n)
				}
				
			},
			//删除数字
			delNumber: function(){
				// console.log(typeof(this.amount));
				
				if(this.amount != 0){
					this.amount = this.amount.substr(0,this.amount.length-1);
					if(!this.amount){
						this.amount = 0.00;
					}
				}
				
			}
		}
	}
</script>

<style>
	/* 键盘样式开始 */
		.keyboard{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			background: #081F3F;
			color: #B2B3B4;
			flex-direction: column;
			
		}
		
		.keyboard .header{

			font-size: 20upx;
			padding: 20upx 0;
		}
		
		.keyboard .header>view{
			height: 50upx;
			line-height: 50upx;
		}
		
		.keyboard .header .iconfont{
			padding: 0 10upx;
		}
		
		.keyboard .header .date{
			width: 25%;
			justify-content: center;
			border-right:1upx solid #1F4B83;
		}
		
		.keyboard .header .account{
			width: 25%;
			justify-content: center;
			border-right:1upx solid #1F4B83;
			overflow: hidden;
			
		}
		
		.keyboard .header .reamrk{
			width: 50%;
			
		}
		
		.keyboard .number-box .number-list{
			flex-wrap: wrap;
		
			border-top:1upx solid #1F4B83;
			box-sizing: border-box;
			flex: 4;
		}
		.keyboard .number-box .number-list>view{
			width: 33.333%;
			height: 90upx;
			justify-content: center;
			line-height: 90upx;
			border-left:1upx solid #1F4B83;
			border-bottom:1upx solid #1F4B83;
			box-sizing: border-box;
		}
		
		.keyboard .ok{
			background: #EE504F;
			color: #fff;
			flex: 1;
			justify-content: center;
			line-height: 360upx;
		}
		
		.keyboard .del .iconfont{
			font-size: 60upx;
		}
	
	/* 键盘样式结束 */
	
	
	/* 选择帐户样式开始 */
		.mask{
			background: rgba(0,0,0,0.7);
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2000;
		}
		
		.mask .account-list{
			width: 100%;
			background: #081F3F;
			color: #8F959B;
			position: fixed;
			bottom: 0;
			left: 0;
			font-size: 24upx;
			flex-direction: column;
		} 
		
		.mask .account-list .title{
			line-height: 80upx;
			border-bottom: 1upx solid #172D4A;
			padding-left: 20upx;
		}
		
		.mask .account-list .list{
			height: 600upx;
			overflow-y: scroll;
			
			flex-direction: column;
		}
		
		.mask .account-list .cancel{
			line-height: 80upx;
			justify-content: center;
			border-top: 1upx solid #172D4A;
		}
		.mask .account-list .list-cell{
			height: 80upx;
			line-height: 80upx;
			border-bottom:  1upx solid #172D4A;
			display: block;
			position: relative;
			padding-left: 120upx;
		}

		.mask .list-logo{
			width: 70upx;
			height: 70upx;
			position: absolute;
			left: 20upx;
			top:0
		}
		
		.mask .list-body{
			display: inline-block;
		}
		
		.mask .select{
			position: absolute;
			right: 20upx;
			color: #EA4A64;
			font-size: 40upx;
			top:0;
		}
	/* 选择帐户样式结束 */
	.add-account{
		width: 100%;
		flex-direction: column;
		/* padding-bottom: 600upx; */
	}
	
	.header{
		justify-content: center;
		padding: 15upx 0;
	}
	
	.header .item{
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		border: 1upx solid #C8C7CC;
		justify-content: center;
		padding: 0 40upx;
		width: 185upx;
		border-radius: 0 8upx 8upx 0;
		border-left: 1upx solid #B4862D;
	}
	
	
	.header .item:first-child{
		border-radius: 8upx 0 0 8upx;
		border-left: 1upx solid #C8C7CC;
		border-right: none;
	}
	
	.remark{
		height: 80upx;
	}
	.remark input{
		flex: 1;
		border-bottom: 1upx solid #007AFF;
		font-size: 28upx;
		height: 80upx;
		line-height: 80upx;
		padding: 0 40upx;
	}
	
	.header .item.active{
		color: #B4862D;
		border-color:#B4862D;
	}
	
	.amount{
		height: 135upx;
		padding: 30upx;
		background: #79A786;
		box-sizing: border-box;
	}
	
	.amount input{
		flex: 1;
		height: 75upx;
		line-height: 75upx;
		color: #ffff;
		justify-content: flex-end;
		padding: 0 40upx;
		font-size: 60upx;
		text-align: right;
	}
	
	.type-list{
		flex-wrap: wrap;
		margin: 16upx 0;
	}
	.type-list .item{
		width: 150upx;
		flex-direction: column;
		justify-content: center;
		font-size: 24upx;
		padding: 25upx 0;
		box-sizing: border-box;
		color: #929292;
		border-radius: 10upx;
	}
	

	.type-list .item>view{
		justify-content: center;
	}
	
	.type-list .item .icon{
		
		
	}
	.type-list .item .icon image{
		width: 40upx;
		height: 40upx;
		border: 1upx solid #151F29;
		border-radius: 50%;
		padding: 15upx;
		vertical-align: middle;
		
	}
	
	.type-list .item.active{
		color: #4CD964;
	}
	
	.type-list .item.active .icon image{
		border: 1upx solid #4CD964;
	}
	
	
	
</style>
